<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!--引入 element js css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">

    <el-button type="primary" @click="startUp">开始交作业</el-button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp
    <el-button type="primary" @click="report">提交结果</el-button>
    <hr>

    <b style="font-size: 20px">已提交学员：</b>
        <span style="color: green">
            {{upStus}}
        </span>
    <br>
    <b style="font-size: 20px">未提交学员：</b>
        <span style="color: red">
            {{noUpStus}}
        </span>
    <br>
    <br>
    <b style="font-size: 15px">收到作业份数：</b>
        <span>
            {{upNums}}
        </span>
    <br>
    <b style="font-size: 15px">不重复作业份数：</b>
        <span>
            {{noDistinctNums}}
        </span>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data:{
            upStus:[],
            noUpStus:[],
            upNums:0,
            noDistinctNums:0
        },
        methods:{
            report(){
                axios.get("/cdm/hw/report")
                .then(resp=>{
                    let data = resp.data;
                    this.upStus = data.upStus;
                    this.noUpStus = data.noUpStus;
                    this.upNums = data.upNums;
                    this.noDistinctNums = data.noDistinctNums;
                });
            },
            startUp(){
                axios.get("/cdm/hw/start")
                .then(resp=>{
                    this.$message({
                        message: resp.data,
                        type: 'success'
                    });
                });
            }
        }
    });
</script>

</html>